<template>
  <div class="cloudaccessory">
    <div class="cloudaccessory-type">
      <dl>
        <dt>应用：</dt>
        <dd
          v-for="(item,index) in mark"
          :class="{active:item.title === markItem}"
          :key="index"
          @click="markItem=item.title"
        >{{ item.title }}
        </dd>
      </dl>
    </div>
    <div class="cloudaccessory-mark">
      <dl>
        <dt>类型：</dt>
        <dd
          v-for="(item,index) in type"
          :class="{active:item.title === typeItem}"
          :key="index"
          @click="typeItem=item.title"
        >{{ item.title }}
        </dd>
      </dl>
    </div>
    <!--<div class="cloudaccessory-filter">-->
      <!--<dl>-->
        <!--<dt>筛选：</dt>-->
        <!--<el-date-picker-->
          <!--v-model="datevalue"-->
          <!--type="daterange"-->
          <!--align="right"-->
          <!--unlink-panels-->
          <!--range-separator="|"-->
          <!--start-placeholder="开始日期"-->
          <!--end-placeholder="结束日期"-->
          <!--style="float:left;"-->
        <!--/>-->
        <!--<el-select v-model="optionItem" style="width:150px;">-->
          <!--<el-option-->
            <!--v-for="item in options"-->
            <!--:key="item.value"-->
            <!--:label="item.label"-->
            <!--:value="item.value"-->
          <!--/>-->
        <!--</el-select>-->
      <!--</dl>-->
    <!--</div>-->
    <el-table
      :table-label="tableLabel"
      :table-data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
    >
      <el-table-column slot="button" :min-width="2" label="操作" prop="manage" align="center">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope)">预览</el-button>
          <!--<el-button>下载</el-button>-->
          <el-button @click="deleteCLick(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :total="total"
      :current-page="currentPage"
      :page-size="pagesize"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    />
    <detail-dialog
      :dialog="detailDialog"
      :src="src"
      :beta="beta"
      @closeDetail="detailDialog = false"
    />
    <!-- 删除 -->
    <el-dialog :visible.sync="handleDelete" width="25%">
      <div style="width:100%;float:left;height:42px;">确定要删除吗?</div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="deleteData(deleteRow)">确定</el-button>
        <el-button @click="handleDelete = false">取消</el-button>
      </div>
    </el-dialog>
    <!-- 删除 -->
  </div>
</template>

<script>
  import DetailDialog from './components/cloudaccessory/detailDialog';
  import {deleteCourseMaterial, list} from "@/api/cloud/course_material"; // 数据接口
  import {scrollTo} from '@/utils/scrollTo' // 上下滑动组件
  import {getTenantId, getUserName} from '@/utils/auth';
  import ElTable from '@/components/Eltable';
  import Pagination from '@/components/Pagination';

  export default {
    components: {
      DetailDialog,
      ElTable,
      Pagination
    },
    data() {
      return {
        currentPage: 1,
        datevalue: '',
        detailDialog: false,
        canAdd: true,
        canDelete: true,
        src: '',
        beta: '',
        Data: [],
        optionItem: '转码状态',
        options: [
          {
            label: '转码状态',
            value: '转码状态'
          }
        ],
        typeItem: '',
        type: [{
          code: '',
          title: '全部'
        },
          {
            code: 'video',
            title: '视频'
          },
          {
            code: 'audio',
            title: '音频'
          },
          {
            code: 'doc',
            title: '文档'
          },
          {
            code: 'ppt',
            title: 'PPT'
          },
          {
            code: 'other',
            title: '其他'
          }
        ],
        markItem: '',
        mark: [
          {
            title: '全部'
          },
          {
            title: '小组'
          },
          {
            title: '试题'
          },
          {
            title: '课程讨论区'
          },
          {
            title: '班级话题'
          },
          {
            title: '资讯'
          }
        ],
        total: 0,
        pagesize: 10,
        tableLabel: [
          {
            label: '文件名称', width: '3', prop: 'title'
          }, {
            label: '类型', width: '2', prop: 'type', isOpera: true
          }, {
            label: '大小', width: '1', prop: 'fileSize'
          }, {
            label: '上传时间', width: '2', prop: 'createTimeStr', isOpera: true
          }, {
            label: '应用', width: '1', prop: 'creator'
          }
        ],
        tableData: [],
        handleDelete: false,//删除
        deleteRow: '',
        deleteCLick(row) {
          this.handleDelete = true;
          this.deleteRow = row;
        },
      }
    },
    mounted() {
      this.getData();
    },
    methods: {
      //接口获取数据
      getData() {
        list(getTenantId(), this.markItem, this.markItem).then(response => {
          this.tableData = response.data.items;
          this.total = response.data.items.length;
        });
      },
      handleSizeChange(val) {
        this.currentPage = 1
        this.pagesize = val.value
        if (this.pagesize >= 20) {
          scrollTo(50, 800)
        }
      },
      handleCurrentChange(val) {
        this.currentPage = val.value
        if (this.pagesize >= 20) {
          scrollTo(50, 800)
        }
      },
      handleClick(scope) {
        this.src = scope.row.url
        this.beta = scope.row.beta
        this.detailDialog = true
      },
      deleteData(row) {
        this.handleDelete = false;
        deleteCourseMaterial(row.id).then(() => {
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 2000
          });
          this.getData();
        })
      }
    }
  }
</script>

<style lang="scss">
  .cloudaccessory {
    padding: 0 20px;

    .manage-button {
      width: 100%;
      height: 50px;
      overflow: hidden;
      line-height: 50px;
    }

    &-type {
      position: relative;
      margin: 0;
      border-bottom: 1px solid #ddd;
      overflow: hidden;

      dd,
      dt {
        float: left;
        margin-right: 10px;
        padding: 10px 0;
      }

      dd:hover {
        color: #409eff;
        cursor: pointer;
      }

      dd.active {
        color: #409eff;
      }
    }

    &-mark {
      position: relative;
      margin: 0;
      border-bottom: 1px solid #ddd;
      overflow: hidden;

      dd,
      dt {
        float: left;
        margin-right: 10px;
        padding: 10px 0;
      }

      dd:hover {
        color: #409eff;
        cursor: pointer;
      }

      dd.active {
        color: #409eff;
      }
    }

    &-filter {
      position: relative;
      margin: 0;
      border-bottom: 1px solid #ddd;
      overflow: hidden;

      dt {
        float: left;
        margin-right: 10px;
        padding: 10px 0;
      }

      .el-date-editor {
        margin-left: 40px;
        margin-right: 4px;
      }
    }
  }
</style>
